<template>
    <simpleness-layout>
        <a-row>
            <a-col span="6">
                <a-card style="height: 75vh;overflow-y:auto;">
                    <QueryTree
                            :handleModel="handleModel"
                            :dataInfo="this.getTreeInfo"
                            :handleDelete="handleDelete"
                            :treeSelectChange="treeSelectChange"
                    ></QueryTree>
                </a-card>
            </a-col>
            <a-col span="18">
                <a-card :bordered="false" :body-style="{padding: '0px'}" style="height: 75vh;overflow-y:auto;">
                    <DictHead></DictHead>
                    <a-card :bodyStyle="{padding:'0px'}" >
                        <a-row style="margin: 5px 5px 5px">
                            <a-col>
                                <a-button
                                        :disabled="this.disable"
                                        type="primary"
                                        @click="handleModel('添加子节点')"
                                >添加
                                </a-button>
                            </a-col>
                        </a-row>
                        <a-table
                                size="middle"
                                :pagination="this.pagination"
                                :columns="columns"
                                :data-source="this.getTableData"
                                @change="handlePageChange"
                        >
                        <span slot="action" slot-scope="text">
                          <a @click="handleModel('编辑子节点',text.objectId)">编辑</a>
                          <a-divider type="vertical"/>
                            <a-popconfirm
                                    title="确定删除吗？"
                                    @confirm="confirm({objectId: text.objectId,child: true})"
                            >
                                <a-icon slot="icon" type="question-circle-o" style="color: red"/>
                                <a>删除</a>
                            </a-popconfirm>
                        </span>
                        </a-table>
                    </a-card>
                </a-card>
            </a-col>
        </a-row>
        <DictModel ref="dictModel"></DictModel>
    </simpleness-layout>
</template>

<script>
  import SimplenessLayout from "@/layouts/SimplenessLayout";
  import DictHead from "./DictHead";
  import QueryTree from "@/components/queryTree/QueryTree";
  import DictModel from "./DictModel";
  import {mapActions, mapGetters, mapMutations, mapState} from 'vuex'

  const columns = [
    {
      title: '字典名称',
      dataIndex: 'name',
      key: 'name',
      align: "center",
    },
    {
      title: '字典标签',
      dataIndex: 'tag',
      key: 'tag',
      align: "center",
    },
    {
      title: '序号',
      dataIndex: 'orderNo',
      key: 'orderNo',
      align: "center",
    },
    {
      title: '描述',
      key: 'description',
      dataIndex: 'description',
      align: "center",
    },
    {
      title: '创建日期',
      key: 'createdDate',
      dataIndex: 'createdDate',
      align: "center",
    }, {
      title: '操作',
      key: 'action',
      scopedSlots: {customRender: 'action'},
      align: "center",
    },
  ];

  export default {
    name: "Dict",
    components: {SimplenessLayout, DictHead, QueryTree, DictModel},
    data() {
      return {
        columns
      }
    },
    created() {
      this.queryTreeInfo({pageSize: -1})
      this.setState({name: 'disable', value: true})
      this.setState({name: 'tableData', value: []})
      this.setState({name: 'queryData', value: {}})
      this.setState({name: 'pagination', value: {total: 0, showTotal: total => `总数：${total} `}})
    },
    computed: {
      ...mapState('dict', ['disable', 'parentId', 'pagination', 'queryData']),
      ...mapGetters('dict', ['getTreeInfo', "getTreeInfoById", 'getTableDataById', 'getTableData'])
    },
    methods: {
      ...mapMutations('dict', ['setState']),
      ...mapActions('dict', ['queryTreeInfo', 'deleteCode']),
      confirm(payload) {
        this.deleteCode(payload)
      },
      handlePageChange(page) {
        let {current, pageSize} = page
        this.queryTreeInfo({...this.queryData, pageNo: current, pageSize, parentId: this.parentId[0]})
      },
      treeSelectChange(key) {
        this.setState({name: 'parentId', value: key})
        this.setState({name: 'disable', value: key[0] ? false : true})
        this.queryTreeInfo({pageNo: 1, pageSize: 10, parentId: key[0]})
      },
      handleDelete(key) {
        this.deleteCode({objectId: key})
        this.setState({name: 'disable', value: true})
        this.setState({name: 'tableData', value: []})
      },
      handleModel(title, key) {
        let data = ''
        let url = 'addSysCode'
        if (key) {
          if (title == '编辑子节点') {
            data = this.getTableDataById(key)
          } else {
            data = this.getTreeInfoById(key)
          }
          url = 'updateSysCode/' + key
        }
        this.$refs.dictModel.showModal(title, url, data)
      },

    }
  }
</script>

<style scoped>

</style>